<template>
  <el-card class="container">
    <searchComponent v-model:search-list="searchList" :button-list="buttonList" @doSearch="handleSearch">
      <template #buttonLeft>
        <div class="flex flex-ai-c w-300">
          <span class="mg-r-10 flex-no-shrink">领薪状态</span>
          <el-select v-model="status.value" class="w-full" placeholder="请选择" @change="handleSelectChange">
            <el-option v-for="item in status.options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </template>
    </searchComponent>
    <tableComponent class="mg-t-20" :table-data="tableData" :table-head="tableHead" row-key="id"
      @selection-change="handleSelectionChange" :page-info="pageInfo" @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
      <template #operate="scope">
        <div class="flex">
          <el-button type="text" size="small" @click="stopPay(scope.row.id)">停止发薪</el-button>
        </div>
      </template>
    </tableComponent>
    <dialogExportDetails v-model:show="showDetails" :default-status="0" :filter-data="searchList" />
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import dialogExportDetails from './components/dialog-export-details.vue'
import dayjs from 'dayjs';
import searchComponent from '@/components/search-component/index.vue'
import tableComponent from '@/components/table-component/index.vue'

const firstDay = dayjs().subtract(1, 'month').startOf('month').format('YYYY-MM-DD')
const lastDay = dayjs().endOf('month').format('YYYY-MM-DD')
import {
  getNotGetPeople,
} from '@/api/pay.ts'
import {
  stopPay,
} from '@/api/operation'
import { exportRecord } from "@/api/salary";

export default defineComponent({
  name: 'SalaryWill',
  components: {
    searchComponent,
    tableComponent,
    dialogExportDetails
  },
  data() {
    return {
      searchList: {
        searchText: {
          name: '搜索',
          prop: 'searchText',
          type: 'input',
          placeholder: '请输入姓名/手机号/身份证',
          value: '',
          defaultValue: ''
        },
        serveCompanyName: {
          name: '所属企业',
          prop: 'serveCompanyName',
          type: 'input',
          placeholder: '请输入派遣单位名称',
          value: '',
          defaultValue: ''
        },
        projectName: {
          name: '所属项目',
          prop: 'projectName',
          type: 'input',
          placeholder: '请输入项目名称',
          value: '',
          defaultValue: ''
        },
        payTime: {
          name: '发薪时间',
          prop: 'PayTime',
          type: 'dateRange',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          value: [firstDay, lastDay],
          defaultValue: [firstDay, lastDay],
          handleChange: (item: any) => {
            if (item.value?.length) {
              const startTime = new Date(item.value[0]).getTime()
              const endTime = new Date(item.value[1]).getTime()
              const startMonth = dayjs(startTime).month()
              const endMonth = dayjs(endTime).month()
              const limitDay = (startMonth + 1 === 7 && endMonth + 1 === 8) ? 61 : 60
              if (endTime - startTime > limitDay * 24 * 60 * 60 * 1000) {
                ElMessage({
                  message: '最多只能选择61天',
                  type: 'warning'
                })
                item.value = []
                return
              }
            }
          }
        }
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
      } as any,
      buttonList: [
        {
          name: '停止发薪',
          icon: 'export',
          type: 'danger',
          fn: () => {
            if (this.selects.length === 0) {
              this.$message.error('请至少选择一条')
              return
            }
            const ids = (this as any).selects.join(',')
            this.stopPay(ids)
          }
        },
        {
          name: '导出名单',
          icon: 'export',
          buttonType: 'export',
          fn: () => {
            if ((this as any).selects?.length) {
              this.handleExport()
            } else {
              console.log(12345);
              ; (this as any).showDetails = true
            }
          }
        }
      ] as any,
      tableHead: [
        {
          prop: 'index'
        },
        {
          prop: 'userName',
          label: '姓名'
        },
        {
          prop: 'idCardNo',
          label: '身份证号',
          width: 170
        },
        {
          prop: 'phone',
          label: '手机号',
          width: 120
        },
        {
          prop: 'projectName',
          label: '所属项目',
          width: 180
        },
        {
          prop: 'serveCompanyName',
          label: '所属企业',
          width: 200
        },
        {
          prop: 'detailRemarks',
          label: '发薪备注',
          width: 150
        },
        {
          prop: 'paymentAmount',
          label: '待领金额',
          suffix: '元'
        },
        {
          prop: 'statusMsg',
          label: '领薪状态',
          width: 160
        },
        {
          prop: 'payTime',
          label: '发薪时间',
          width: 160
        },
        {
          prop: 'operate',
          label: '操作',
          width: 100,
          fixed: 'right'
        }
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
      ] as any,
      tableData: [
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
      ] as any,
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 0
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
      } as any,
      selects: [],
      showDetails: false,
      status: {
        value: '',
        options: [
          {
            label: '全部',
            value: ''
          },
          {
            label: '未领取',
            value: 0
          },
          {
            label: '进行中',
            value: 3
          },
          {
            label: '领薪失败',
            value: 4
          },
        ]
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleSelectionChange(row: any) {
      this.selects = row.map((item: any) => item.id)
    },
    getData() {
      const query = this.createQuery()
      getNotGetPeople(query).then((res: any) => {
        this.tableData = res.list
        this.pageInfo.total = res.totalCount
        this.$emit('total', res.totalCount)
      })
    },
    createQuery(hasPage = true) {
      const query = {} as any

      if (hasPage) {
        query.pageNum = this.pageInfo.pageNum
        query.pageSize = this.pageInfo.pageSize
      }

      for (const key in this.searchList) {
        if (this.searchList[key].type === 'dateRange') {
          console.log(111)
          query[`begin${this.searchList[key].prop}`] = this.searchList[key].value?.length ? this.searchList[key].value[0] : ''
          query[`end${this.searchList[key].prop}`] = this.searchList[key].value?.length ? this.searchList[key].value[1] : ''
        } else {
          query[(this.searchList[key]).prop] = this.searchList[key].value
        }
      }
      query.status = this.status.value
      return query
    },
    handleSearch() {
      this.pageInfo.pageNum = 1
      this.getData()
    },
    handleSizeChange(ev: number) {
      this.pageInfo.pageSize = ev
      this.getData()
    },
    handleCurrentChange(ev: number) {
      this.pageInfo.pageNum = ev
      this.getData()
    },
    stopPay(ids: any) {
      ElMessageBox.confirm(
        '确定进行停止发薪吗？',
        '提示',
        {
          type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }
      ).then(async () => {
        await stopPay(ids)
        this.$message.success('停止发薪成功！')
        this.getData()
      })
    },
    handleExport() {
      const query = this.createQuery(false)
      query.ids = this.selects.join(',')
      query.status = 0
      exportRecord(query).then(res => {
        window.location.href =
          process.env.VUE_APP_BASE_URL +
          '/common/download?delete=true&fileName=' +
          res
        this.$message.success('导出成功！')
      })
    },
    handleSelectChange() {
      this.getData()
    }
  }
})
</script>

<style scoped lang="stylus">

</style>
